import Taro from '@tarojs/taro'
import React, { PureComponent } from 'react'
// 界面组件
import { View, Text, Button, Image, ScrollView } from '@tarojs/components'
import { AtAvatar, AtIcon, AtSearchBar, AtTag } from 'taro-ui'

import CTopbar from '../../components/CTopBar/index'
import { get_consulting_data, isLike_api, get_tags_list_api } from './service'
import './index.scss'
import like from '@/assets/like.png'
import dislike from '@/assets/dislike.png'
import Consulting_No_Content from '@/assets/Consulting_No_Content.png'
import GetTopBarInfo from '@/utils/GetTopBarInfo' //动态高度
import customerImg from '@/assets/My/customer.png'
/**
 * 咨询界面
 */

interface ITags {
  id: string
  therapistLabelName: string
}
interface IDatalist {
  briefIntroduction: string
  employmentYear: number
  id: number
  isCollect: boolean
  price: number
  teacherType: number
  therapistImg: string
  therapistLabel: string
  therapistName: string
  time: number
  type: number
}
type I = {
  datalist: IDatalist[]
  islike_status: boolean
  system: string
  value: string
  tags: ITags[]
  select_tag_id: number | string
  total: number
  pageSize: number
  pageNum: number
  isMore: boolean
}
interface Consulting {
  state: I
}

interface Idatalist {}
class Consulting extends PureComponent<any> {
  constructor(props) {
    super(props)
    this.state = {
      datalist: [],
      islike_status: false,
      system: '',
      value: '',
      tags: [],
      select_tag_id: 0,
      total: 0,
      pageSize: 10,
      pageNum: 1,
      isMore: false,
    }
  }
  //WARNING! To be deprecated in React v17. Use componentDidMount instead.
  componentWillMount() {
    const system = Taro.getStorageSync('system')
    this.setState({
      system,
    })
    this.get_consulting_data()
    this.get_tags_list()
  }

  onPullDownRefresh() {
    const { pageNum, pageSize, select_tag_id, value, datalist } = this.state
    const params = {
      pageNum,
      pageSize,
      tagId: select_tag_id,
      value,
    }
    get_consulting_data(params).then(({ result, data }) => {
      if (result === 1999) {
        this.setState({ datalist: data })
      } else {
        Taro.showToast({
          icon: 'none',
          title: '出现错误！',
          mask: true,
        })
      }
      Taro.stopPullDownRefresh()
    })
  }
  // 获取咨询师列表
  get_consulting_data() {
    const { pageNum, pageSize, select_tag_id, value, datalist, isMore } = this.state
    const params = {
      pageNum,
      pageSize,
      tagId: select_tag_id,
      value,
    }
    get_consulting_data(params).then(({ result, data }) => {
      // 如果 请求的数据 小于 pagenum 说明后续没有数据了  触底不在请求
      // if (pageNum === data.length) {
      //   const arr = Array.from(data)
      //   this.setState({
      //     isMore: false,
      //     datalist: datalist.concat(...arr),
      //   })
      // }else {
      this.setState({ datalist: data })
      // }
    })
  }
  //  获取标签
  get_tags_list() {
    get_tags_list_api().then(({ result, data }) => {
      this.setState({
        tags: data,
      })
    })
  }
  goDetails(id) {
    Taro.navigateTo({
      url: '/pages/Consulting/ConsultingDetails/index?id=' + id,
    })
  }

  onChange(value) {
    this.setState({
      value: value,
    })
  }
  onActionClick(searchVal) {
    this.setState(
      {
        select_tag_id: 0,
        value: searchVal,
      },
      async () => {
        await this.get_consulting_data()
        await this.setState({
          value: '',
        })
      },
    )
  }
  ChangeTagStatus({ name, active }) {
    console.log(name, active)
    this.setState(
      {
        select_tag_id: name,
        value: '',
      },
      () => {
        this.get_consulting_data()
      },
    )
  }
  // 上拉触底
  onReachBottom() {
    const { isMore } = this.state
    // if (isMore) {
    this.setState(
      {
        pageNum: this.state.pageNum + 1,
      },
      () => {
        this.get_consulting_data()
      },
    )
    // } else {
    //   Taro.showToast({
    //     icon: 'none',
    //     title: '没有数据啦',
    //     mask: true,
    //   })
    // }
  }

  render() {
    const consultTeacherTypeArr = ['', '高级', '资深', '主任', '专家']
    const { datalist, islike_status, system, value, select_tag_id, tags } = this.state
    return (
      <View style={{ paddingTop: `${GetTopBarInfo().TopBarHeight}px` }}>
        <View className='header'>
          <CTopbar title='心理咨询'></CTopbar>
        </View>
        <View className='consulting'>
          <View className='search_bar'>
            <AtSearchBar
              actionName='搜索'
              placeholder='搜索咨询师或问题类型'
              value={value}
              onChange={this.onChange.bind(this)}
              onActionClick={this.onActionClick.bind(this, value)}
            />
            <View className='tips'>
              <Image src={customerImg} />
              <Text>智能小助手</Text>
            </View>
          </View>
          <View className='filter_tags'>
            <ScrollView scrollX scrollLeft={0}>
              <AtTag type='primary' name={'0'} active={'0' === select_tag_id} circle onClick={this.ChangeTagStatus.bind(this)}>
                {'全部'}
              </AtTag>
              {tags &&
                tags.map((c, i) => {
                  return (
                    <AtTag type='primary' name={c.id} active={c.id === select_tag_id} circle onClick={this.ChangeTagStatus.bind(this)}>
                      {c.therapistLabelName}
                    </AtTag>
                  )
                })}
            </ScrollView>
          </View>

          {datalist.length > 0 ? (
            datalist.map((c, i) => {
              return (
                <View className='wrapper' key={c.id} onClick={this.goDetails.bind(this, c.id)}>
                  <View className='at-row content'>
                    <View className='at-col at-col-1 at-col--auto '>
                      <AtAvatar image={c.therapistImg} circle size='large'></AtAvatar>
                    </View>
                    <View className='at-col at-col--auto right '>
                      <View className='title'>
                        {c.therapistName}

                        <Text className='working_age'>
                          从业
                          <Text className='blue'>{c.employmentYear || 0}</Text>年
                        </Text>
                      </View>
                      <View className='rank'>国家{consultTeacherTypeArr[c.teacherType]}心理咨询师</View>
                      <View className='footer'>
                        <View className='item_tags'>
                          {c.therapistLabel &&
                            c.therapistLabel.split(',').map((item, index) => {
                              return (
                                <AtTag type='secondary' active={true} size='small' circle key={index}>
                                  {item}
                                </AtTag>
                              )
                            })}
                        </View>
                        <View className='price'>
                          {system.indexOf('iOS') < 0 ? <Text>{c.price ? '￥' + c.price : '免费'}</Text> : '免费'}
                        </View>
                      </View>
                      {/* <View className='noto'>{c.briefIntroduction}</View> */}
                      {/* <View className='footer'>
                      <View>
                        {system.indexOf('iOS') < 0 ? (
                          <Text>
                            {c.price}元/{c.time}分钟
                          </Text>
                        ) : (
                          '免费'
                        )}
                      </View>

                      <View>{c.type === 0 ? '当面' : '视频'}</View>
                      <View className='like_wrapper' onClick={this.isLike.bind(this, c.id, 3)}>
                        {c.isCollect ? <Image src={like} /> : <Image src={dislike} />}

                        <Text className='likeStyle'>{c.isCollect ? '已关注' : '关注'}</Text>
                      </View>
                    </View> */}
                    </View>
                  </View>
                  {/* <Button className='btn' onClick={this.goDetails.bind(this, c.id)}>
                  预约
                </Button> */}
                </View>
              )
            })
          ) : (
            // <View className='noFind'>暂无数据...</View>
            <View className='not_content'>
              <Image src={Consulting_No_Content} mode='widthFix' />
            </View>
          )}
        </View>
      </View>
    )
  }
}

export default Consulting
